<template>
	<view >
		<!-- #ifdef APP-PLUS -->
		<view @click="open()" class="box" :style="'width: 100vw;max-height:'+height+';'">
		<image v-if="poster.length" :src="poster"
		style="width: 100%;"
		mode="aspectFit"></image>
		<view class="btn" style="">
			  <view style="z-index: 2;">
				  <u-icon name="play-circle" size="36px" color="#fff" ></u-icon>
			  </view>
		</view>
		<u-popup :duration="0" :show="show" mode="center"  @close="close" @open="open" style="z-index:99;border: 0;">
					  <view class="v-box" >
						<video style="width: 100%;max-height: 750rpx;" 
						:autoplay="true"
						:src="src"
							></video>
					  </view>
					  <view @click="close()" v-if="show"
					  style="width: 100%;display: flex;flex-direction: row;justify-content: center;background-color: #545454;">
						  <view style="height:45px;line-height: 45px;color: #fff;text-align: center; ">关 闭</view>
					  </view>
			</u-popup>
	</view>
	<!-- #endif -->
	<!-- #ifndef APP-PLUS -->
	<view style="width: 100vw;">
		<video :src="src" :style="{width:width,maxHeight: height}"
			:poster="poster">
		</video>
	</view>

	<!-- #endif -->
	</view>
	
</template>

<script>
	export default {
		name:"moxi-video",
		data() {
			return {
				show:false
			};
		},props:{
			poster:{
				type:String,
				default:""
			},
			src:{
				type:String,
				default:""
			},
			width:{
				type:String,
				default:"100%"
			},
			height:{
				type:String,
				default:"300px"
			}
		},methods:{
			 open() {
			        this.show = true;
			      },
			  close() {
				this.show = false
				// console.log('close');
			  }
		}
	}
</script>

<style>
	.v-box{
		z-index: 100;width: 100vw;background-color: #000;text-align: center;display: flex;flex-direction: column;
	}
.box{background-color: #000;display: flex;flex-direction: row;min-height: 200px;
	align-items: center;justify-content: center;position: relative;}
	.btn{position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;}
</style>